<template>
	<view class="container">
		<view class="content">
			<text class="content-text">
				为保证你的账号安全，在你提交的注销申请生效前，需同时满足以下条件：
			</text>

			<view class="conditions">
				<text class="condition-item">1. 注销需先行通过账号安全验证</text>

				<text class="condition-item">2. 账号财产已结清，交易已完成</text>
				<text class="condition-desc">
					账号下所有关联业务的资产及预期收益（包括现金、金币、卡券等）和权益（包括会员身份）均已结清、退款、清空或自愿放弃，所有交易已完成或已自愿放弃，支付账户已注销。
				</text>

				<text class="condition-item">3. 账号授权、绑定已解除</text>
				<text class="condition-desc3">
					账号已解除与其他账号（包括企业号、员工号等）及第三方产品、平台的授权或绑定关系，通过本账号接入的相关服务中没有未完成或存在争议的内容。
				</text>

				<text class="condition-item">4. 账号注销后的违规信息管理及使用</text>
				<text class="condition-desc3">
					允许注销的违规账号注销后，我们可留存手机号、实名信息用于同一手机号、实名认证信息重新注册、实名认证账号的管理（包括但不限于限制频次等）。原账号下的违规行为及/或相应处置措施会延续至你注册的新账号。
				</text>
			</view>

			<view class="agreement">
				<radio :checked="isAgreed" @click="toggleAgreement" />
				<text class="agreement-text">我已阅读并同意<text class="link">《零付注销须知》</text></text>
			</view>

			<button class="next-btn" @click="handleNext">下一步</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const isAgreed = ref(false)

	const toggleAgreement = () => {
		isAgreed.value = !isAgreed.value
	}

	const handleNext = () => {
		if (!isAgreed.value) {
			uni.showToast({
				title: '请先阅读并同意零付注销须知',
				icon: 'none',
				duration: 2000
			})
			return
		}

		uni.navigateTo({
			url:'/pages/tabBars/DeleteAccount/DeleteAccountIndexPhone'
		})
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 20rpx;
		background-color: #ffffff;
	}

	.content {
		margin-top: 50rpx;
	}

	.content-text {
		font-size: 36rpx;
		color: #303133;
	}

	.conditions {
		margin-top: 50rpx;
	}

	.condition-item {
		font-size: 36rpx;
		color: #303133;
		margin-bottom: 40rpx;
		display: block;
	}

	.condition-desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 40rpx;
		display: block;
	}

	.condition-desc3 {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 40rpx;
		display: block;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 30rpx 0;
	}

	// 调整radio大小
	.agreement radio {
		transform: scale(0.8); // 缩放比例，根据需要调整
		transform-origin: 0 center; // 确保单选框与文字对齐
	}

	.agreement-text {
		font-size: 24rpx;
		color: #999;
	}

	.link {
		color: #2F80ED;
	}

	.next-btn {
		background: #2F80ED;
		color: #ffffff;
		font-size: 30rpx;
		width: 100%;
		border-radius: 44rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>